<template>
  <div class="order-main">
    <Address @click-address="addresSel" />

    <div class="text-part">
      <div class="dot"></div>
      <span class="text">确认订单信息</span>
    </div>
    <OrderList ref="orderList" />

    <div class="bottom-tips">
      <div class="tips-left">结算金额满足 消费满3000元，可以选择赠送的产品</div>

      <div class="v-selects coupon">
        <Select
          placeholder="请选择产品"
          :options="platformGift"
          :styleColor="`#C71D32`"
          :optionColor="`#C71D32`"
          :borderColor="`#C71D32`"
          :valueColor="`#C71D32`"
          :searchColor="`#C71D32`"
          :searchable="false"
          label="gift_name"
          :reduce="(option:Gift) => option.gift_id"
          :clearable="true"
          v-model:value="giftValue"
        />
      </div>
    </div>
    <div class="box">
      <div class="left coupon-select">
        <Select
          placeholder="请选择平台优惠券"
          :options="platformCoupon"
          :searchable="false"
          label="coupon_name"
          :reduce="(option:Coupon) => option.coupon_id"
          :clearable="true"
          v-model:value="couponValue"
        />
      </div>
      <div class="right">
        <div class="gold-user">
          <p>金币账户</p>
          <p>({{ lastPriceShow.gold }})</p>
        </div>

        <Switch v-model:value="gold.use" />
      </div>
    </div>

    <div class="order-bottom">
      <div class="order-box">
        <div class="top">
          <span>实付款:</span>
          <span>￥{{ twoFixed(lastPriceShow.price) }}</span>
        </div>

        <div class="bottom" v-show="address">
          <p>
            配送至：{{ address?.province }} {{ address?.city }}
            {{ address?.full_address }}
          </p>
          <p>收货人：{{ address?.consignee }} {{ address?.phone }}</p>
        </div>

        <div class="bottom" v-show="!address">
          <p>暂未选择收货地址</p>
        </div>
      </div>
    </div>

    <div class="bottom-button">
      <router-link to="/cart/index" class="button-left thumb"
        ><img
          class="back-logo"
          :src="publicUrl('/images/back-logo.png')"
        />返回购物车</router-link
      >
      <div class="button thumb" @click="sumitOrder">提交订单</div>
    </div>
  </div>
  <div></div>
</template>
<script setup lang="ts" name="">
import { ref, computed } from "vue";
import { publicUrl, twoFixed } from "@/utils/util";
import OrderList from "./components/OrderList/index.vue";
import Address from "./components/Address/index.vue";
import { AddressData } from "./interface";
import { toast } from "vue3-toastify";
import Switch from "@/components/Switch/index.vue";
// import vSelect from "vue-select";

import Select from "@/components/Select/index.vue";

import { useRouter } from "vue-router";
// const data = ref();
const router = useRouter();
const orderList = ref<InstanceType<typeof OrderList>>();

interface Coupon {
  coupon_id: number;
  coupon_name: string;
  coupon_discount: number;
}

interface Gift {
  gift_id: number;
  gift_name: string;
}

const platformGift = ref<Array<Gift>>([
  {
    gift_id: 1,
    gift_name: "玩具X1",
  },
  {
    gift_id: 2,
    gift_name: "玩具X2",
  },
]);
const giftValue = ref<number | undefined>(undefined);

const couponValue = ref<number | undefined>(undefined);

const gold = ref<{
  use: boolean;
  have: number;
}>({
  use: false,
  have: 2000,
});
const lastPriceShow = computed(
  (): {
    gold: number;
    price: number;
  } => {
    let last = { gold: 0.0, price: 0.0 };
    last.price = orderList.value?.orderTable?.cartChecked.lastPrice
      ? orderList.value?.orderTable?.cartChecked.lastPrice
      : 0.0;
    last.gold = gold.value.have;
    /* 平台优惠券*/
    let coupon = platformCoupon.value.find(
      (item: Coupon) => couponValue.value === item.coupon_id
    );

    if (coupon) last.price -= coupon.coupon_discount;

    /* 使用金币账户 */

    if (gold.value.use) {
      if (last.price >= last.gold) {
        last.price -= last.gold;
        last.gold = 0;
      } else {
        last.gold -= last.price;
        last.price = 0;
      }
    }

    /* */

    return last;
  }
);

const platformCoupon = ref<Array<Coupon>>([
  {
    coupon_id: 1,
    coupon_name: "优惠300",
    coupon_discount: 300,
  },
  {
    coupon_id: 2,
    coupon_name: "优惠500",
    coupon_discount: 500,
  },
]);

const address = ref<AddressData | undefined>(undefined);

const sumitOrder = () => {
  if (!address.value) return toast.error(`请选择收货地址`);
  router.push(`/order/checkstand`);
};

const addresSel = (item: AddressData | undefined) => {
  address.value = item;
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
// @import "@/styles/VueSelect/gray-else.css";
</style>
